- affix_offset = local_assigns.fetch(:affix_offset, "50")
- project = local_assigns[:project]

%aside.right-sidebar.js-right-sidebar{ data: { "auto-collapse" => true, "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: "#{sidebar_gutter_collapsed_class(false)} !gl-hidden @sm/panel:!gl-block", 'aria-live' => 'polite', 'aria-label': _('Milestone') }
  .issuable-sidebar.milestone-sidebar
    .block.milestone-progress.issuable-sidebar-header
      %a.gutter-toggle.gl-float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => s_('MilestoneSidebar|Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
        = sidebar_gutter_toggle_icon
      .title.hide-collapsed
        %strong.gl-font-bold== #{milestone.percent_complete}%
        %span.hide-collapsed
          = s_('MilestoneSidebar|complete')
      .value.hide-collapsed
        = milestone_progress_bar(milestone)

    .block.milestone-progress.hide-expanded
      .sidebar-collapsed-icon.has-tooltip{ title: milestone_progress_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
        %span== #{milestone.percent_complete}%
        = milestone_progress_bar(milestone)

    .block.start_date.hide-collapsed
      .title
        = s_('MilestoneSidebar|Start date')
        - if @project && can?(current_user, :admin_milestone, @project)
          = link_to s_('MilestoneSidebar|Edit'), edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link gl-float-right'
      .value
        %span.value-content{ data: { testid: 'start-date-content' } }
          - if milestone.start_date
            %span.gl-font-bold= milestone.start_date.to_fs(:medium)
          - else
            %span.no-value= s_('MilestoneSidebar|No start date')

    .block.due_date
      .sidebar-collapsed-icon{ class: "!gl-h-auto" }
        %span{ 'aria-hidden': 'true' }
          = sprite_icon('calendar')
        %span.collapsed-milestone-date
          - if milestone.start_date && milestone.due_date
            - if milestone.start_date.year == milestone.due_date.year
              .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
                = milestone.start_date.strftime('%b %-d')
            - else
              .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
                = milestone.start_date.strftime('%b %-d %Y')
            .date-separator -
            .due_date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
              = milestone.due_date.strftime('%b %-d %Y')
          - elsif milestone.start_date
            = s_('MilestoneSidebar|From')
            .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
              = milestone.start_date.strftime('%b %-d %Y')
          - elsif milestone.due_date
            = s_('MilestoneSidebar|Until')
            .milestone-date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
              = milestone.due_date.strftime('%b %-d %Y')
          - else
            .has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
              = s_('MilestoneSidebar|None')
      .title.hide-collapsed
        = s_('MilestoneSidebar|Due date')
        - if @project && can?(current_user, :admin_milestone, @project)
          = link_to s_('MilestoneSidebar|Edit'), edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link gl-float-right'
      .value.hide-collapsed
        %span.value-content{ data: { testid: 'due-date-content' } }
          - if milestone.due_date
            %span.gl-font-bold= milestone.due_date.to_fs(:medium)
          - else
            %span.no-value= s_('MilestoneSidebar|No due date')
        - remaining_days = remaining_days_in_words(milestone.due_date, milestone.start_date)
        - if remaining_days.present?
          = surround '(', ')' do
            %span.remaining-days= remaining_days

    - if !project || can?(current_user, :read_issue, project)
      .block.issues
        .sidebar-collapsed-icon.has-tooltip{ title: milestone_issues_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
          %strong
            = sprite_icon(milestone_work_items_icon)
          %span= milestone.issues_visible_to_user(current_user).count
        .title.hide-collapsed
          = s_('MilestoneSidebar|Work items')
          = gl_badge_tag milestone.milestone_issues(current_user).length, variant: :neutral
          - if show_new_issue_link?(project)
            = link_to new_project_issue_path(project, issue: { milestone_id: milestone.id }), class: "gl-float-right", title: s_('MilestoneSidebar|New Issue') do
              = s_('MilestoneSidebar|New issue')
        .value.hide-collapsed.gl-font-bold
          %span.milestone-stat
            = link_to milestones_browse_issuables_path(milestone, type: :issues) do
              = s_('MilestoneSidebar|Open:')
              = milestone.milestone_issues(current_user).opened.length
          %span.milestone-stat
            = link_to milestones_browse_issuables_path(milestone, type: :issues, state: 'closed') do
              = s_('MilestoneSidebar|Closed:')
              = milestone.milestone_issues(current_user).closed.length

    .block
      .js-sidebar-time-tracking-root{ data: { time_estimate: @milestone.total_time_estimate,
        time_spent: @milestone.total_time_spent,
        human_time_estimate: @milestone.human_total_time_estimate,
        human_time_spent: @milestone.human_total_time_spent,
        iid: @milestone.iid,
        limit_to_hours: Gitlab::CurrentSettings.time_tracking_limit_to_hours.to_s } }

    = render_if_exists 'shared/milestones/weight', milestone: milestone

    - if milestone.merge_requests_enabled?
      .block.merge-requests
        .sidebar-collapsed-icon.has-tooltip{ title: milestone_merge_requests_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
          %strong
            = sprite_icon('merge-request')
          %span= milestone.merge_requests.count
        .title.hide-collapsed
          = s_('MilestoneSidebar|Merge requests')
          = gl_badge_tag milestone.merge_requests.count, variant: :neutral
        .value.hide-collapsed.gl-font-bold
          - if !project || can?(current_user, :read_merge_request, project)
            %span.milestone-stat
              = link_to milestones_browse_issuables_path(milestone, type: :merge_requests) do
                = s_('MilestoneSidebar|Open:')
                = milestone.merge_requests.opened.count
            %span.milestone-stat
              = link_to milestones_browse_issuables_path(milestone, type: :merge_requests, state: 'closed') do
                = s_('MilestoneSidebar|Closed:')
                = milestone.merge_requests.closed.count
            %span.milestone-stat
              = link_to milestones_browse_issuables_path(milestone, type: :merge_requests, state: 'merged') do
                = s_('MilestoneSidebar|Merged:')
                = milestone.merge_requests.merged.count
          - else
            %span.milestone-stat
              = s_('MilestoneSidebar|Open:')
              = milestone.merge_requests.opened.count
            %span.milestone-stat
              = s_('MilestoneSidebar|Closed:')
              = milestone.merge_requests.closed.count
            %span.milestone-stat
              = s_('MilestoneSidebar|Merged:')
              = milestone.merge_requests.merged.count

    - recent_releases, total_count, more_count = recent_releases_with_counts(milestone, current_user)
    .block.releases{ data: { testid: 'milestone-sidebar-releases' } }
      .sidebar-collapsed-icon.has-tooltip{ title: milestone_releases_tooltip_text(milestone), data: { container: 'body', placement: 'left', boundary: 'viewport', testid: 'milestone-sidebar-releases-collapsed-icon' } }
        %strong
          = sprite_icon("rocket")
        %span= total_count
      .title.hide-collapsed= n_('Release', 'Releases', total_count)
      .hide-collapsed
        - if total_count == 0
          .no-value= s_('MilestoneSidebar|None')
        - else
          %div{ class: "!gl-font-bold" }
            - recent_releases.each do |release|
              = link_to release.name, project_releases_path(release.project, anchor: release.tag)
              - unless release == recent_releases.last
                %span{ class: "!gl-font-normal" } &bull;
            - if more_count > 0
              %span{ class: "!gl-font-normal" } &bull;
              - more_text = n_('%{count} more release', '%{count} more releases', more_count) % { count: more_count }
              - if milestone.project_milestone?
                = link_to more_text, project_releases_path(milestone.project)
              - else
                = more_text

    - milestone_ref = milestone.try(:to_reference, full: true)
    - if milestone_ref.present?
      .block.reference
        = clipboard_button(text: milestone_ref, title: s_('MilestoneSidebar|Copy reference'), placement: "left", boundary: 'viewport', class: 'sidebar-collapsed-icon js-dont-change-state')
        .gl-flex.gl-items-center.gl-justify-between.gl-mb-2.hide-collapsed
          %span.gl-overflow-hidden.gl-text-ellipsis.gl-whitespace-nowrap
            = s_('MilestoneSidebar|Reference:')
            %span{ title: milestone_ref }
              = milestone_ref
          = clipboard_button(text: milestone_ref, title: s_('MilestoneSidebar|Copy reference'), placement: "left", boundary: 'viewport')
